<template>
    <div class="lgbox register">
        <video class="myvideo" autoplay muted loop :src="src"></video>
        <div class="login-box">
            <h2 class="title">欢迎学员注册</h2>
            <div class="box">
                <el-form ref="formRef" :model="model" status-icon :rules="rules" label-width="120px" class="myform">
                    <el-form-item label="用户名" prop="username">
                        <el-input :prefix-icon="User" clearable v-model="model.username" type="text"
                            placeholder="请输入用户名" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input :prefix-icon="Cellphone" clearable v-model="model.phone" type="text"
                            placeholder="请输入手机号" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input @input="checkdbpass" :prefix-icon="Lock" clearable v-model="model.password"
                            type="password" show-password placeholder="请输入密码" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="dbpass">
                        <el-input :prefix-icon="Lock" clearable v-model="model.dbpass" type="password" show-password
                            placeholder="请输入确认密码" autocomplete="off" />
                    </el-form-item>

                    <el-form-item class="lastitem">
                        <div class="alinks">
                            <router-link class="litem " to="/login">登录</router-link>
                            <router-link class="litem bg" to="/findpass">找回密码</router-link>
                        </div>
                    </el-form-item>

                    <el-form-item class="lastitem">
                        <el-button type="success" block class="btnblock" @click="submitForm(formRef)">注册</el-button>
                        <el-button type="danger" block class="btnblock" @click="resetForm(formRef)">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, type Ref } from 'vue'
import { userInfoFace } from '../../utils/types';
import { Calendar, Search, Lock, User, Cellphone } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import { reg } from '../../utils/validate'
import { ElMessage } from 'element-plus'
import request from '../../api/request';
import { Http } from '../../api/api'
import { useRouter } from 'vue-router';

const vSrc = ref('http://pcsource.upupoo.com/theme/2000764912/video_2000764912c4f1_mark.mp4')
const src = ref('https://img-baofun.zhhainiao.com/market/133/2366564fa6b83158208eb3181752a8d6_preview.mp4')
const router = useRouter()

// const formRef: Ref<any> = ref()
const formRef = ref<FormInstance | any>()
const model: Ref<userInfoFace | any> = ref({
    role: 1,
})
const checkdbpass = () => {
    if (reg.pwd.test(model.value.password) && reg.pwd.test(model.value.dbpass)) {

        formRef.value.validateField("dbpass", () => null)
    }
}

const checkPassCommon = (rule: any, value: any, callback: any) => {
    if (reg.pwd.test(model.value.password)) {
        if (value != model.value.password) {
            callback(new Error("两次密码不匹配"))
        } else {
            callback()
        }
    } else {

        formRef.value.validateField("password", () => null)
    }
}
const rules = reactive<FormRules>({
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
    ],
    phone: [
        { required: true, message: '手机号不能为空', trigger: 'blur' },
        {
            pattern: reg.phone,
            message: '手机号格式不正确'
        }
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        {
            pattern: reg.pwd,
            message: '请输入6-16位数字加字母的密码'
        }
    ],
    dbpass: [
        { required: true, message: '确认密码不能为空', trigger: 'blur' },
        {
            pattern: reg.pwd,
            message: '请输入6-16位数字加字母的密码'
        },
        {
            validator: checkPassCommon,
        }
    ]
})


const resetForm = (formEl: FormInstance | undefined) => {
    console.log(formRef)

    if (!formEl) return;
    formEl.resetFields()
}

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate(async (valid: boolean) => {
        console.log(valid)
        if (valid) {

            console.log(model.value)
            let res = await Http.register(model.value) as unknown as any;
            if (res.code == 200) {

                router.push({
                    name: 'login', query: {
                        username: model.value.username,
                        phone: model.value.phone
                    }
                })
            }
        } else {

            ElMessage.closeAll()
            ElMessage.error({
                message: "请输入有效的校验数据"
            })

        }
    })
}

const getTestApi = async () => {

    let res = await Http.getTestApi() as unknown as any;

}
onMounted(() => {
    getTestApi()
})
</script>